<template>
  <div>{{ reactives.name }}</div>
  <div>{{ refs }}</div>
  <div>{{ nextRefs }}</div>
  <div>
    <button @click="changeName">修改reactive属性</button>
  </div>
  <SetUpChild name="setup-child" @click="clickSetUpChild" />
</template>

<script setup lang="ts">
import { reactive, ref, watch, watchEffect, computed } from "vue";
import SetUpChild from "./SetUpChild.vue";
const refs = ref<string>("refs");
const reactives = reactive({
  name: "reactives"
});
const changeName = () => {
  reactives.name = "reactives.name" + +new Date();
  refs.value = "refs" + +new Date();
};
watch(
  () => reactives.name,
  () => {
    console.log("reactives.name change");
  }
);
watch(
  () => refs.value,
  () => {
    console.log("refs change");
  }
);
watchEffect(() => {
  console.log("refs change", refs.value);
});

const nextRefs = computed(() => {
  return refs.value + refs.value;
});
interface IClickContent {
  name: string;
}
const clickSetUpChild = (content: IClickContent) => {
  console.log("child", content);
};
</script>

<style scoped></style>
